<template>
  <div id="rights" class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="列表权限" name="list">
        <div class="filter-container">
          <el-table :data="rightsList" border stripe align="center">
            <el-table-column type="index" label="序号" width="100px" align="center" />
            <el-table-column label="权限名称" prop="authName" align="center" />
            <el-table-column label="路径" prop="path" align="center" />
            <el-table-column label="权限等级" prop="level" align="center">
              <template>
                <el-tag>一级权限</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="全部权限" name="tree">
        <div class="filter-container">
          <el-table :data="rightsList" border stripe align="center">
            <el-table-column type="index" label="序号" width="100px" align="center" />
            <el-table-column label="权限名称" prop="authName" align="center" />
            <el-table-column label="路径" prop="path" align="center" />
            <el-table-column label="权限等级" prop="level" align="center">
              <template slot-scope="{row}">
                <el-tag v-if="row.level === '0'">一级权限</el-tag>
                <el-tag v-else-if="row.level === '1'" type="success">二级权限</el-tag>
                <el-tag v-else type="warning">三级权限</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { rightsList } from '@/api/rights'

export default {
  name: 'Rights',
  data() {
    return {
      // 被激活的页签的名称
      activeName: 'list',
      // 权限的样式
      typeList: 'list',
      typeTree: 'tree',
      rightsList: []
    }
  },
  created() {
    // 获取所有的权限
    this.getRightList()
  },
  methods: {
    // 获取权限列表
    getRightList() {
      if (this.activeName === 'list') {
        const type = this.typeTree
        rightsList(type).then((response) => {
          if (response.data.meta.status !== 200) {
            return this.$message.error('获取角色列表失败！')
          }
          this.rightsList = response.data.data
        })
      } else {
        const type = this.typeList
        rightsList(type).then((response) => {
          if (response.data.meta.status !== 200) {
            return this.$message.error('获取角色列表失败！')
          }
          this.rightsList = response.data.data
        })
      }
    },
    // 标签页被点击
    handleTabClick() {
      this.getRightList()
    }
  }
}
</script>
